<template>
  <div class="components-container" v-cloak>
    <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="pageWidth">
      <h3>{{title}}</h3>
      <div style="margin:10px 20px">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">结存时间</label>
            <div class="layui-input-inline">
              <el-date-picker v-date type="date" v-model="regInfo.BAEDATEFIRST" readonly></el-date-picker>
            </div>
            <div class="layui-input-inline" style="width:15px;height:40px;line-height:40px;">
              <p>至</p>
            </div>
            <div class="layui-input-inline">
              <el-date-picker
                v-date
                type="date"
                v-model="regInfo.BAEDATE"
                @change="blanceChange"
                :readonly="!isbalance"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">结存描述</label>
            <div class="layui-input-inline">
              <el-input v-model="regInfo.BAEREMARK" style="width:740px;" :readonly="!isbalance"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div :style="{maxHeight:maxHeight+'px'}" style="overflow:auto;">
        <table class="layui-table" style="border-spacing: 0;">
          <colgroup>
            <col width="120" />
            <col width="150" />
            <col width="100" />
            <col width="100" />
            <col />
            <col width="150" />
            <col width="100" />
            <col />
            <col />
          </colgroup>
          <thead>
            <tr>
              <th>物品名称</th>
              <th>进货价格</th>
              <th>上期结存</th>
              <th>本期入库</th>
              <th>本期出库</th>
              <th>本期调库</th>
              <th>本期结存</th>
              <th>本期冻结</th>
              <th>本期库存金额</th>
            </tr>
          </thead>
          <tbody ref="inputs">
            <tr class="allRow" v-for="(chl,index) in chlList">
              <td>
                <!-- 物品名称 -->
                {{chl.DPGNAME}}
              </td>
              <td>
                <!-- 进货价格 -->
                {{chl.DPGCOST}}
              </td>
              <td>
                <!-- 上期结存 -->
                {{chl.BALLASTBAL}}
              </td>
              <td>
                <!-- 本期入库 -->
                {{chl.BALTHISGETIN}}
              </td>
              <td>
                <!-- 本期出库 -->
                {{chl.BALTHISOUT}}
              </td>
              <td>
                <!-- 本期调库 -->
                {{chl.BALTAKEINVENTORY}}
              </td>
              <td>
                <!-- 本期结存 -->
                {{chl.BALTHISBAL}}
              </td>
              <td>
                <!-- 本期冻结 -->
                {{chl.BALTHISFROZEN}}
              </td>
              <td>
                <!-- 库存金额 -->
                {{chl.BALMONEY}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="layui-form-item btnCenter sweet-btn">
        <el-button @click="closeDialog">取消</el-button>
        <el-button
          type="primary"
          @click="submit()"
          :loading="this.$store.state.isloading"
          v-if="isbalance"
        >保存</el-button>
      </div>
    </sweet-modal>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.el-button + .el-button {
  margin-left: 0;
}

.sweet-btn {
  margin-top: 20px;
}
</style>

<script>
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { accMul, Subtr, accAdd } from "@/utils/operations.js";
import { ORDER } from "@/const/orderConst.js";
import Vue from "vue";

const BALANCE = "结存";
const INFO = "详情";

export default {
  name: "hello",
  data() {
    return {
      pageWidth: 1200,
      maxHeight: 500,
      CHDID: null,
      order: null,
      title: null,
      //所有收费项目
      allCharge: [],
      chaList: [],
      payment: [],
      pointType: [],
      payData: {
        CHDCODNAME: "现金"
      },
      printUrl: null,
      printTitle: null,
      isHidden: null,
      //收费信息
      chdData: {},
      diechdData: [],
      dialogTableVisible: false,
      regInfo: {
        BAEDATEFIRST: null, //结存前时间
        BAEDATE: null, //结存后时间
        BAEREMARK: null //结存描述
      },
      //打印类型
      printName: null,
      //收费项目
      chlList: [
      ],
      chl: {
        BALDPGID: null, //物品id
        DPGNAME: null, //物品名称
        BALDEPOSIT: null, //所属仓库
        BALLASTBAL: null, //上月结存
        BALTHISGETIN: null, //本月入库
        BALTHISOUT: null, //本月出库
        BALTHISFROZEN: null, //本月冻结
        BALTAKEINVENTORY: null, //盘存
        BALTHISBAL: null, //本月结存
        BALREMARK: null //盘存描述
      },
      //区分详情和新增
      isbalance: true,
      StoragePosition: [] //存放位置
    };
  },
  methods: {
    //回车事件
    enterEvent(rowNum, colNum) {
      //获取所有行
      let rows = this.$refs.inputs.getElementsByClassName("allRow");
      //获取当前行
      let currow = rows[rowNum];
      // 获取当前行所有列
      let inputs = currow.getElementsByTagName("input");
      //强制隐藏下拉框
      if (colNum === 0) {
        let chl = this.chlList[rowNum];
        if (chl.CHLCHAID.length === 0) {
          this.$message({
            type: "error",
            message: `第${parseInt(rowNum) + 1}行收费项目不能为空!`
          });
          return;
        }
        let select = this.$refs.select;
        select[rowNum].visible = false;
      }
      //最后一列
      if (colNum === inputs.length - 1) {
        //最后一行
        if (rowNum === this.chlList.length - 1) {
        }
        //换行
        this.$nextTick(function() {
          this.enterEvent(rowNum + 1, -1);
        });
      } else {
        //获取下一个焦点
        this.$nextTick(function() {
          inputs[colNum + 1].select();
        });
      }
    },
    //打开弹出框
    open(order, id) {
      Object.assign(this.$data, this.$options.data());
      this.CHDID = id;
      this.order = order;
      switch (this.order) {
        case BALANCE:
          this.isbalance = true;
          this.title = "结存";
          Object.assign(this.$data.regInfo, this.$options.data().regInfo);
          this.$refs.dialog.open();
          this.GetBalStartDate(); //获取结存时间
          this.getwarehouseadress(); //获取仓库
          break;
        case INFO:
          this.isbalance = false;
          this.title = "结存详情";
          Object.assign(this.$data.regInfo, this.$options.data().regInfo);
          this.$refs.dialog.open();
          this.balanceInfo(id);
          break;
        default:
          break;
      }
    },
    //日期更改刷新
    blanceChange() {
      this.QueryBaes();
    },
    QueryBaes() {
      let data = {
        BAESTARTDATE: this.regInfo.BAEDATEFIRST,
        BAEDATE: this.regInfo.BAEDATE
      };
      data.BAESTARTDATE = formatDate(data.BAESTARTDATE, "yyyyMMdd");
      data.BAEDATE = formatDate(data.BAEDATE, "yyyyMMdd");
      apiBase.DoService(data, apiBase.getApiAdress().Depot.QueryBae, res => {
        this.chlList = res.data.content;
      });
    },
    // 结存物品详情
    QueryBae() {
      let data = {
        BAESTARTDATE: this.regInfo.BAEDATEFIRST,
        BAEDATE: this.regInfo.BAEDATE
      };
      data.BAESTARTDATE = formatDate(data.BAESTARTDATE, "yyyyMMdd");
      data.BAEDATE = formatDate(data.BAEDATE, "yyyyMMdd");
      apiBase.DoService(data, apiBase.getApiAdress().Depot.QueryBae, res => {
        this.chlList = res.data.content;
      });
    },
    balanceInfo(id) {
      let data = {
        BAEID: id
      };
      apiBase.DoService(data, apiBase.getApiAdress().Depot.DetailBae, res => {
        this.chlList = res.data.content.list_Bal;
        this.regInfo.BAEDATE = res.data.content.BAEDATE;
        this.regInfo.BAEDATEFIRST = res.data.content.BAESTARTDATE;
        this.regInfo.BAEREMARK = res.data.content.BAEREMARK;
      });
    },
    GetBalStartDate() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Depot.GetBalStartDate,
        res => {
          this.regInfo.BAEDATEFIRST = res.data.content.StartDate;
          this.regInfo.BAEDATE = new Date();
          this.QueryBae(); //获取结存商品
        }
      );
    },
    //获取仓库存放位置
    getwarehouseadress() {
      let data = {};
      apiBase.DoService(data, apiBase.getApiAdress().Code.GetDepot, res => {
        this.StoragePosition = res.data.content;
      });
    },

    //提交
    submit(checkout = false) {
      this.$store.state.isloading = true;
      switch (this.order) {
        case BALANCE: //新增
          this.dataAdd(checkout);
          break;
        default:
          break;
      }
    },
    dataAdd() {
      let chlList = JSON.parse(JSON.stringify(this.chlList));
      let data = JSON.parse(JSON.stringify(this.regInfo));
      if (this.regInfo.BAEDATEFIRST) {
        data.BAESTARTDATE = formatDate(this.regInfo.BAEDATEFIRST, "yyyyMMdd");
      }
      if (this.regInfo.BAEDATE) {
        data.BAEDATE = formatDate(this.regInfo.BAEDATE, "yyyyMMdd");
      }
      if (chlList.length > 0) {
        data.list_Bal = chlList;
      }
      apiBase.DoService(data, apiBase.getApiAdress().Depot.CreateBae, res => {
        this.$message({
          type: "success",
          message: "结存成功!"
        });
        this.closeDialog();
        this.refreshData();
      });
    },
    closeDialog() {
      switch (this.order) {
        case BALANCE:
        case INFO:
          this.$refs.dialog.close();
          break;
        default:
          break;
      }
    },
    refreshData() {
      this.$emit("refreshData");
    }
  },
  mounted() {},
  created() {},
  //计算属性
  computed: {},

  watch: {},
  components: {
    sweetModal
  }
};
</script>
